<template>
  <div class="commonAddr">
      <div class="commonAddr_item" 
            @click="openAddrList(addr)"
            v-for="(addr,key) in commonAddr" :key="key">
          <div class="icon">
            <i :class="[`iconfont`,`icon-${key}`]"></i>
            <div class="addr">
                <b>{{addr.dec}}</b>
                <span>{{addr.address||'请添加地址'}}</span>
            </div>
          </div>
          <div class="edit">
            <em class="iconfont icon-right"></em>
            <!-- <em v-show="addr.address!='请添加地址' && !addr.edit" @click="editAddr(addr)">编辑</em> 
            <em v-show="addr.edit">删除</em>
             <em v-show="addr.edit">修改</em>  -->
          </div>
      </div>
    <transition name="slide_in_bottom">
        <div class="searchWrap" v-show="searchBoxShow">
            <search-box @selectAddr="addAddr" @cancel="searchBoxShow=false"></search-box>
        </div>
    </transition>
  </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import {addCommonAddr,getCommonAddr} from '@/http'
    import {addressSearch} from '@s/map.js'
    import searchBox from '@/components/common/searchBox/searchBox'
    export default {
        name:'commonAddr',
        data(){
            return{
                searchBoxShow:false,
                edit:false,
                type:2,  //2家地址 3公司地址
                commonAddr:{
                    home:{type:2,id:'',title:'home',dec:'家庭地址',address:''},
                    company:{type:3,id:'',title:'company',dec:'公司地址',address:''}
                }
            }
        },
        components:{searchBox},
        computed:{
            ...mapGetters(['myPos','cookie','login_info'])
        },
        methods:{
            addressSearch(){
                // 搜索附近地址
                addressSearch({
                    searchType:'circle',
                    circle:{
                        lat:this.myPos.lat,
                        lng:this.myPos.lng
                    },
                    callback:(res)=>{
                        this.$store.dispatch('loadAddrList',res.detail.pois)
                        this.searchBoxShow = true
                    }
                })
            },
            openAddrList(addr){
                this.type = addr.type;
                this.addressSearch()
            },
            changeAddr(pos){
                let _title = this.type==2?'home':'company';
                if(this.commonAddr[_title].address==''){
                    this.addAddr(pos)
                }else{
                    this.modifyAddr(pos)
                }
            },
            addAddr(pos){
                this.searchBoxShow=false;
                let address = pos.addr;
                let longitude = pos.lng;
                let latitude = pos.lat;
                let type = this.type;
                addCommonAddr({address,longitude,latitude,type}).then(()=>{
                    this.getAddr()
                })
            },
            getAddr(){
                getCommonAddr().then((data)=>{
                    if(data.code == 0){
                        let addrList = data.data.rows;
                        for(let i=0;i<addrList.length;i++){
                            if(addrList[i].type==2){
                               this.commonAddr.home = Object.assign(this.commonAddr.home,addrList[i])
                                
                            }else{
                               this.commonAddr.company = Object.assign(this.commonAddr.company,addrList[i])
                            }
                        }
                    }
                })
            },
            delAddr(address_id){
                delCommonAddr(address_id)
            },
            modifyAddr(pos){
                let user_id = this.login_info.user_id;
                let address = pos.addr;
                let address_id = (this.commonAddr.filter(addr=>addr.type==this.type)).id;
                let longitude = pos.lng;
                let latitude = pos.lat;
                let type = this.type;
                editCommonAddr({user_id,address,address_id,longitude,latitude,type}).then(()=>{
                    this.getAddr()
                })
            }
        },
        mounted(){
            this.getAddr()
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../../style/var.scss';

    .commonAddr{
        width:100%;
        height:100%;
        padding:50px;
        

        .iconfont{font-size: 20px;padding-right:50px;}

        .commonAddr_item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            background:#fff;
            padding:80px 50px;
            margin-bottom:50px;
            font-size: 16px;
            box-shadow: 0 0 5px 0 $border_base;
            div{
                display: flex;
            }
            .icon{
                align-items: center;
            }
        }
        .addr,.edit{
            flex-direction: column;
            span{
                color:$font_color_sub; font-size: 14px;
            }
        }
        .edit{
            flex-shrink: 0;
            em{color:$font_color_sub;&.iconfont{padding:0;font-size: 14px;}}
        }

        .searchWrap{
            position: fixed;
            top:0;
            left:0;
            z-index: 999;
            width:100%;
            height:100%;
        }
    }
</style>

